<template>
    <el-progress type="circle" :percentage="Percentvalue" :stroke-width="strokeWidth" :width="size">
        <template #default="{ percentage }">
            <span class="percentage-value" :style="{
                    '--fontSize': props.fontSize + 'px'
                }
                ">{{ percentage }}%</span>
        </template>
    </el-progress>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
    Percentvalue: {
        type: Number,
        default: 0
    },
    strokeWidth: {
        type: Number,
        default: 10
    },
    size: {
        type: Number,
        default: 100
    },
    fontSize: {
        type: Number,
        default: 20
    }
})
const Percentvalue = ref(0)

const strokeWidth = ref(10)

const size = ref(100)

watch(() => props.Percentvalue, (newVal) => {
    Percentvalue.value = newVal
}, { immediate: true, deep: true })

watch(() => props.strokeWidth, (newVal) => {
    strokeWidth.value = newVal
}, { immediate: true, deep: true })

watch(() => props.size, (newVal) => {
    size.value = newVal
}, { immediate: true, deep: true })


</script>

<style lang="scss" scoped>
.percentage-value {
    color: white;
    font-size: var(--fontSize);
    font-family: fantasy;
    user-select: none;
}
</style>